<template>
  <div>
    <el-upload
      v-loading="loading"
      :action="uploadUrl"
      :disabled="!computedIsEdit(true)"
      :show-file-list="false"
      :title="placeholder"
      :data="{
        ...params,
        fileName:fileName,
      }"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      with-credentials
      class="avatar-uploader"
      v-on="$listeners"
      v-bind="$attrs"
    >
      <template>
        <div style="position: relative">
          <div v-for="(img,i) in valueNews" :key="i" class="ma-1">
            <!--            <template v-if="computedIsEdit && placeholder">-->
            <!--              <div style="padding:30px;">{{ placeholder }}</div>-->
            <!--            </template>-->
            <template v-if="img">
              <video
                v-if="videoTypes.indexOf(fileType(img))>=0"
                :src="FileUtil.getFileViewUrl(img)"
                class="avatar"
                :style="getStyle"
              />
              <img v-else-if="imageTypes.indexOf(fileType(img))>=0" :src="FileUtil.getFileViewUrl(img)" class="avatar" :style="picStyle || getStyle">
              <span v-else :style="picStyle || getStyle">
<!--                <i :class="`fa fa-file-${fileType(img)}-o`"></i>-->
                {{ FileUtil.getFileNameFromPath(img)}}
              </span>
              <div
                  v-if="computedIsEdit(true) && !isEmpty"
                  class="del"
                  @click.stop="valueNews.length===1?valueNews=['']:$delete(valueNews,i)"
              >
                {{$t('删除')}}
              </div>
            </template>
          </div>
        </div>
      </template>
      <i v-if="computedIsEdit(true)" class="el-icon-plus avatar-uploader-icon"/>
    </el-upload>
    <template v-if="computedIsEdit(true)">
      <div class="d-flex" v-for="(valueNew,i) in valueNews">
        <el-input
          :key="i"
          v-model="valueNews[i]"
          class="zuploadInput mr-2"
          :autosize="{ minRows: 1 }"
          size="mini"
          :placeholder="$t('文件路径')"
        />
        <div
            v-if="computedIsEdit(true) && !isEmpty"
            class="del"
            @click.stop="valueNews.length===1?valueNews=['']:$delete(valueNews,i)"
        >
          {{$t('删除')}}
        </div>
      </div>
    </template>
  </div>
</template>
<script>

import mixinDiv from "../../main/js/mixin/MixinDiv";

export default {
  name: 'Zupload',
  mixins: [mixinDiv],
  props: {
    /**
     * 路径(相对)
     */
    picStyle: {},
    value: {},
    params: {
      type: Object,
      default: () => {
        return {
          module:'front',
          oriNameFlag:false,
        }
      }
    },
    /**
     * 上传的目录(模块在yml中预先定义)
     */
    // module: {
    //   type: String,
    //   required: true
    // },
    placeholder: {
      type: String,
      default: () => null
    },
    // multiple: {}
  },
  data() {
    return {
      uploadUrl: null, // 上传请求地址
      // valueNew: this.value, // 最后上传返回的path
      valueNews: [''],
      fileName: null,
      loading: false,
      videoTypes: ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob'],// ...
      imageTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg', 'ico', 'heif', 'heic', 'psd', 'raw'],
    }
  },
  computed: {
    isEmpty() {
      return this.valueNews.length === 1 && this.valueNews[0] === ''
    }
  },
  watch: {
    'value'(newVal) {
      const valueNewsStr = this.valueNews.join(',')
      if (valueNewsStr !== newVal) {
        this.valueNews = newVal ? newVal.split(',') : ['']
      }
    },
    valueNews: {
      handler(newVal, oldVal) {
        const valueNewsStr = newVal.join(',')
        if (valueNewsStr !== this.value) {
          this.$emit('change', valueNewsStr)
          this.$emit('input', valueNewsStr)
        }
      },
      deep: true
    }
  },
  created() {
    this.valueNews = this.value ? this.value.split(',') : ['']
    // this.uploadUrl = FileUtil.getUploadPath(this.module)
    this.uploadUrl = '/api/admin/common/file/upload'
  },
  methods: {
    fileType(path) {
      if (path) {
        const index = path.lastIndexOf('.')
        if (index >= 0) {
          return path.substring(index + 1)
        }
      }
    },
    beforeUpload(file) {
      this.loading = true
      console.log(file)
      this.fileName = file.name
      console.log('fileName', this.fileName)
    },
    handleError() {
      console.log('上传失败', arguments)
      this.loading = false
    },
    handleRemove() {
    },
    handleSuccess(rs) {
      if (rs.code === 500) {
        console.log('上传失败', rs.msg)
        this.$message.error(this.$t('上传失败') + ' ' + rs.msg)
      } else {
        console.log('上传成功', rs.data[0])
        if (this.isEmpty) {
          this.valueNews.shift()
        }
        console.log('[].shift()', [].shift())
        this.valueNews.push(rs.data[0])
      }
      this.loading = false
    }
  }
}
</script>

<style scoped>
.del {
  width: 60px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  background: #000000b3;
  text-align: center;
}
</style>
